<template>
	<div class="form-rules-container layout-pd">
		<el-form :model="queryParams" size="default" inline label-width="100px" class="mt35 mb35">
			<el-form-item label="分类名称">
				<el-input v-model="queryParams.name" placeholder="请输入角色名称" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="menulistData">搜索</el-button>
				<el-button >重置</el-button>
			</el-form-item>
			<el-row>
				<el-col :span="24">
					<el-button type="primary" @click="handleOpen(null)">新增</el-button>
				</el-col>
			</el-row>
		</el-form>
		<div>
			<el-table :data="menuData" row-key="id">
				<el-table-column label="ID" prop="id"></el-table-column>
				<el-table-column label="分类名称" prop="classifyName"></el-table-column>
				<el-table-column label="分类图标" prop="image">
					<template #default="scope">
						<el-image :src="imageBase + scope.row.image" style="width: 40px;height: 40px;;"></el-image>
					</template>
				</el-table-column>
				<el-table-column label="排序" prop="sort"></el-table-column>
                <el-table-column label="状态" prop="status"></el-table-column>
				<el-table-column fixed="right" label="操作" width="180">
					<template #default="scope">
						<el-button link type="primary" size="small" @click="handleOpen(scope.row)" v-if="scope.row.pid==0">添加子目录</el-button>
						<el-button link type="primary" size="small" @click="handleOpen(scope.row)">修改</el-button>
						<el-button link type="primary" size="small" @click="delMenu(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<el-dialog
			v-model="dialogVisible"
			title="编辑菜单"
			width="30%"
			:before-close="handleClose"
		>
			<el-form :model="classifyForm" ref="classifyFormRef" :rules="rules">
			  <el-form-item label="分类名称" prop="classifyName">
				<el-input v-model="classifyForm.classifyName" placeholder="填写分类名称"></el-input>
			  </el-form-item>
			  <el-form-item label="父级">
					<el-cascader :options="menuData" v-model="upList"
					:props="{value:'id',label:'classifyName',children:'children1'}" />
			  </el-form-item>
			  <el-form-item label="分类图标" >
				<el-icon v-if="!classifyForm.image" @click="openImage"><Plus /></el-icon>
				<el-image v-else :src="imageBase + classifyForm.image" style="width: 50px; height: 50px;" @click="openImage"></el-image>
				
			  </el-form-item>
			  <el-form-item label="排序" >
				<el-input-number v-model="classifyForm.sort" :min="1" :max="10" @change="handleChange" />
			  </el-form-item>
			  <el-form-item label="状态" >
				<el-switch v-model="classifyForm.status" active-value="1" 
				inactive-value="0" inline-prompt
				active-text="有效"  inactive-text="无效" />
			  </el-form-item>
			</el-form>
			<template #footer>
			<span class="dialog-footer">
				<el-button @click="dialogVisible = false">Cancel</el-button>
				<el-button type="primary" @click="submitForm">
				提交
				</el-button>
			</span>
			</template>
		</el-dialog>

		<el-dialog title="选择图标" width="70%" v-model="dialogImgVisible">
			<material v-if="dialogImgVisible" 
				@updateValue="selectValue" :danxuan="true"></material>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="pagesFormRules">
import { onMounted, reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import{classifyList,addOrUpdateClassify} from '@/api/goods/goodsClassify'
import Material from './material.vue'

declare module '@vue/runtime-core' {
  interface GlobalComponents {
    Material: typeof Material
  }
}

// 添加props类型声明
interface MaterialProps {
  danxuan: boolean;
}



const imageBase = 'http://localhost:8080/profile/'
// 定义变量内容
const upList=ref([])
const dialogVisible = ref(false)
const dialogImgVisible = ref(false)
// 添加ElForm类型导入
import type { ElForm } from 'element-plus'
// 明确表单引用类型
// 使用非空断言初始化表单引用
const classifyFormRef = ref<InstanceType<typeof ElForm>>(null!)
const menuData = ref([])
const total = ref(0)
const currPageCount = ref(0)
const classifyForm=ref({
	classifyName:null,
	id:null,
	image:null,
	sort:null,
	status:"1",
	pid:"0"
})
const queryParams = ref({
	name:null
})
const rules = ref({
	classifyName: [
    { required: true, message: '请输入菜单名称', trigger: 'blur' }
  ]
})
//选择图片
function selectValue(val:any,danxuan:any){
	console.log(val,danxuan)
	classifyForm.value.image = val.value[0].fileName
	//关闭窗口
	closeImage()
}
function closeImage(){
	dialogImgVisible.value = false
}
//打开选择图片
function openImage(){
	dialogImgVisible.value = true
}
function handleOpen(val:any){
	dialogVisible.value = true
	console.log(val)
	if(val){
		Object.assign(classifyForm.value, val);
	}
	console.log(classifyForm.value)
}
function handleClose(){
	dialogVisible.value = false
}
//删除菜单
function delMenu(){

}
//点击分页
function menulistData(){
	classifyList(queryParams.value).then((resp:any)=>{
		menuData.value = resp.data
	})
}
function submitForm(){
	classifyFormRef.value.validate((valid:any)=>{
		if(valid){
			if(upList.value.length>0){
				classifyForm.value.pid=upList.value[0]
			}else{
				classifyForm.value.pid="0"
			}
		addOrUpdateClassify(classifyForm.value).then((resp:any)=>{
			if(resp.code==200){
					ElMessage({
						message: '提交成功',
						type: 'success',
					})	
					handleClose()
					menulistData()
				}
			})
		}
	})
	
}
onMounted(() => {
	menulistData();
});
</script>
<style>
.el-upload{
	width:50px;
	height: 50px;
}
</style>
